<template>
    <div>
        <h1>文件1</h1>
        <el-upload class="avatar-uploader"  action="" :http-request="beginUpload" :show-file-list="false">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-progress :percentage="Number(percentage.toFixed(2))"></el-progress>
        <el-button @click="pauseUpload">暂停</el-button>
        <el-button @click="goonUpload">继续</el-button>
        <el-button @click="download">下载</el-button>

        <video :src="movie_src" controls="controls">
            您的浏览器不支持 video 标签。
        </video>
        <!-- <el-button @click="download">下载</el-button> -->
        <!-- <a href="javascript:void(0);" onclick="download()">下载</a> -->
        <!-- <a :href="download">下载</a> -->
        <!-- <a href="<%=upurl%>">下载</a> -->
        <!-- <a @click="download">下载</a> -->
        <!-- a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" onclick="js_method()" -->
    
    <div class="test_two_box">
        <video
        id="myVideo"
        class="video-js"
        >
        <source
            :src="upurl"
            type="video/mp4"
        >
        </video>
    </div>
    </div>
    
</template>

<script>
    import OSS from 'ali-oss'
    // const upurl='';
    var upurl = ''
    export default {
        components: {},
        props:{
             // 文件上传的接受的类型  video/* :视频类型， image/*：图片，根据需要判断
        
        },
        data() {
            return {
                imageUrl: '',
                percentage: 0,
                checkpoint: null,
                client: null,
                filename: '',
                upurl: 'http://0628.oss-cn-hangzhou.aliyuncs.com/QQ%E8%A7%86%E9%A2%9120200630123253_1593619954604.mp4?OSSAccessKeyId=LTAI4GGkWMN9SyN1AkRK6qCT&Expires=1593621755&Signature=K5Id9X2GZSekcxTd7bSSEM2n2qA%3D',
                movie_src
                :''

            }
        },
        mounted : function() {
        this.movie_src ='';
         this.initVideo();
       },
        computed: {},
        created() {
            this.client = new OSS({
                region: 'oss-cn-hangzhou',
                accessKeyId: 'LTAI4GGkWMN9SyN1AkRK6qCT',
                accessKeySecret: 'sQf4RnuvZM47hXV5XxBazZqyXzJyNU',
                bucket: '0628',
                secure: false
            })
        },
        methods: {
             initVideo() {
        //初始化视频方法
        let myPlayer = this.$video(myVideo, {
            //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
            controls: true,
            //自动播放属性,muted:静音播放
            autoplay: false,
            //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
            preload: "auto",
            //设置视频播放器的显示宽度（以像素为单位）
            width: "800px",
            //设置视频播放器的显示高度（以像素为单位）
            height: "400px"
        });
        },
            //下载文件
            download() {
                // upurl = this.client.signatureUrl(_this.filename);
                window.location.href = upurl;
            },
            async ossUpload(filename, file) {
                let _this = this
                try {
                    let result = await _this.client.multipartUpload(filename, file, {
                        progress: async function (p, checkpoint) {
                            _this.checkpoint = checkpoint
                            _this.percentage = p * 100
                        },
                        checkpoint: _this.checkpoint
                    })
                    console.log(result)
                } catch (e) {
                    console.log(e)
                }
            },
            beginUpload(file) {
               
                let _this = this
                let filename = file.file.name
                filename = filename.split('.')[0] + '_' + new Date().getTime() + '.' + filename.split('.')[1]
                _this.file = file
                _this.filename = filename
                _this.ossUpload(filename, file.file)
                //保存上传的文件下载地址
                upurl = this.client.signatureUrl(_this.filename);
                this.upurl = upurl
                console.log("111")
                console.log(upurl)
                console.log("222")
                // location.reload();
                
            },
            pauseUpload() {
                this.client.cancel()
            },
            goonUpload() {
                let file = this.file
                let _this = this
                _this.ossUpload(_this.filename, file.file)
            }
        }
    }
</script>
